<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">里程碑名称</div>
      <div class="main">
        <el-form auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>里程碑名称：</label>
              <div class="detail">{{ createList.name }}</div>
            </div>
            <div class="row">
              <label>预计开始时间：</label>
              <div class="detail">{{ createList.estimatedStartTime }}</div>
            </div>
            <div class="row">
              <label>预计结束时间：</label>
              <div class="detail">{{ createList.estimatedEndTime }}</div>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>实际开始时间：</label>
              <div class="detail">{{ createList.startTime||'--' }}</div>
            </div>
            <div class="row">
              <label>实际竣工时间：</label>
              <div class="detail">{{ createList.completionTime }}</div>
            </div>
            <div class="row" />
          </div>
          <!-- <div class="addNode">
            <div class="nodeTitle">里程碑节点</div>
            <div class="node">
              <div class="infoMsg">
                <div
                  v-for="(value, index) in createList.progressNodeList"
                  :key="index"
                  style="width: 100%;display: inherit;"
                >
                  <div class="pointbg">
                    <div class="circle" />
                    <div class="line" />
                  </div>
                  <div class="text">
                    <img :src="value.fileUrl" class="avatar">
                  </div>
                  <div class="textarea">
                    {{ value.description }}
                  </div>
                </div>

              </div>
            </div>
          </div> -->
          <div class="tab">
            <div class="row">
              <div class="imgtext">照片：</div>
              <div v-for="(img, key) in createList.files" :key="key" class="imgList">
                <div @click="lookimg(img,index)">
                  <img style="width:150px;height:100px;margin: 0 0 5px 10px;" :src="img.path" :alt="img.name">
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>

  </div>

</template>

<script>
import { detailManagerment } from '@/api/progressManagement'

// import { uploadFiles, deleteFiles } from '@/api/file'
export default {
  name: 'DetailProgress',
  components: {
  },
  data() {
    return {
      dataTime: [],
      createList: {},
      loading: false
    }
  },
  computed: {

  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const id = this.$route.query.id
      const res = await detailManagerment(id)
      if (res.code === 200) {
        this.createList = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .detail{
              font-size:14px;
              font-weight:400;
              color:rgba(255,255,255,0.65);
              display: inline-block;
            }
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
        .addNode{
          .nodeTitle{
            font-size:14px;
            font-weight:400;
            color:$color;
          }
          .node{
            // display: flex;
            font-size:12px;
            font-weight:400;
            color:$color;
            margin: 0 0 0 97px;
            cursor: pointer;
            .nodePoint{
              width: 12px;
              height: 12px;
              border: 2px solid $color;
              border-radius: 10px;
            }
            .pointbg{
              .circle{
              width: 12px;
              height: 12px;
              background: #252532;
              border-radius: 50px;
              }
              .line{
                width: 1px;
                height: 86px;
                border: 1px solid #F7B500;
                margin: 4px 0 0 3px;
              }
            }
            span{
                margin-left: 10px;
              }
            .infoMsg{
              // display: flex;
              width: 100%;
              .text{
                margin: -100px 0 10px 22px;
                width: 162px;
                height: 95px;
                border-radius: 4px;
                border:1px solid $color;
                .uploadbg{
                  width: 160px;
                  margin: 23px 0 0 0;
                  .upoadtext{
                    margin: 0 auto;
                    margin-top: 12px;
                    display: block;
                  }
                }
              }
              .textarea{
                width: 82%;
                margin: -95px 8px 0 192px;
                float: left;
                line-height: 23px;
                letter-spacing: 1px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                /* text-overflow: ellipsis; */
                -webkit-box-orient: vertical;
              }
              .upimg{
                width:74px;
                height:20px;
                font-size:14px;
                font-weight:400;
                color:$color;
                line-height: 87px;
              }
            }
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #F7B500;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 92px;
    display: block;
  }
  .imgtext{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
    margin: 0 0 20px 0;
  }
  .imgList{
    // display: flex;
    float: left;
    margin-right: 10px;
    div{
      width: 150px;
      // flex: 1;
    }
  }
</style>
